<template>
	<div class="room">
		<div class="room_top">
			<div class="room_top_search">
				<u-search placeholder="请输入房间编号" @custom='searchEvnet' v-model="keyword" @click='searchEvnet'
					@search='searchEvnet'></u-search>
			</div>
			<div class="room_top_select">
				<div class="room_top_select_items" v-for="(item,index) in list" :key="index" @click='closeEvent(index)'>
					<span>{{item.name}}</span>
					<u-icon name="arrow-up-fill" color='#ABABAB' size='13' style="margin-left: 20rpx;"
						v-if="item.status == 2"></u-icon>
					<u-icon name="arrow-down-fill" color='#ABABAB' size='13' style="margin-left: 20rpx;"
						v-else></u-icon>

				</div>
			</div>
		</div>

		<!-- 滚动层 -->
		<div class="roomScroll">
			<div class="roomScrollLeft">
				<div class="roomScrollLeft_item" :class="leftListIndex==idx?'roomScrollLeft_item_act':''"
					v-for="(ite,idx) in leftList" :key="idx" @click='leftListEvent(idx,ite.storey_id)'>
					{{ite.name}}
				</div>
			</div>
			<div class="roomScrollRight">
				<div class="roomScrollRight_items" v-for="(ite,idx) in floorList" :key="idx" @click='roomEvent(ite)'>
					<div class="roomScrollRight_items_top">
						<div class="roomScrollRight_items_top_left ex">
							{{ite.name}}
						</div>
						<div class="roomScrollRight_items_top_right" :class="'roomColor'+ite.status">
							<span></span> {{ite.status | statusFilter}}
						</div>
					</div>
					<div class="roomScrollRight_items_center">
						<div class="roomScrollRight_items_center_left ex">
							{{ite.sub_title}}
						</div>
						<!-- v-if="ite.status == 5" -->
						<div class="roomScrollRight_items_center_right1" v-if="ite.count > 0">
							洁
						</div>
						<div class="roomScrollRight_items_center_right" v-if="ite.work > 0">
							修
						</div>
					</div>

					<div class="roomScrollRight_items_bottom">
						<div class="roomScrollRight_items_bottom_left">
							<image :src="ite.avatar_url" mode=""></image>
						</div>
						<div class="roomScrollRight_items_bottom_right">
							{{ite.nickname}}
						</div>
					</div>
				</div>
			</div>
		</div>


		<u-picker :show="show" :columns="columnsStatus" @confirm='confirm' @cancel='cancel' keyName="label"
			:closeOnClickOverlay='true' @close='cancel'></u-picker>
		<u-picker :show="showT" :columns="columnsT" @confirm='confirmT' @cancel='cancel' keyName="label"
			:closeOnClickOverlay='true' @close='cancel'></u-picker>
		<u-picker :show="showF" :columns="columnsF" ref="uPicker" @confirm='confirmF' @cancel='cancel' keyName="name"
			:closeOnClickOverlay='true' @change="changeHandler" @close='cancel'></u-picker>
		<div id="tabar">
			<tabar :value4='2'></tabar>
		</div>
	</div>
</template>

<script>
	import tabar from '@/pagesA/components/tabar.vue'
	export default {
		filters: {
			statusFilter(v) {
				var s = ''
				// 1可预定 2待入驻 3已入住 4待搬离 5未保洁
				switch (v) {
					case '1':
						s = '可预定'
						break;
					case '2':
						s = '待入驻'
						break;
					case '3':
						s = '已入住'
						break;
					case '4':
						s = '待搬离'
						break;
					case '5':
						s = '未保洁'
						break;
				}
				return s
			}
		},
		components: {
			tabar
		},
		data() {
			// 1可预定 2待入驻 3已入住 4待搬离 5未保洁
			return {
				columnsStatus: [
					[{
							label: '全部',
							id: 'all'
						},
						{
							label: '可预定',
							// 其他属性值
							id: 1
							// ...
						}, {
							label: '待入驻',
							id: 2
						}, {
							label: '已入驻',
							id: 3
						}, {
							label: '待搬离',
							id: 4
						}, {
							label: '未保洁',
							id: 5
						}
					]
				],
				show: false,
				list: [{
					name: '房间状态',
					status: 1,
				}, {
					name: '房间类型',
					status: 1,
				}, {
					name: '区域筛选',
					status: 1,
				}],
				leftList: [],
				rightList: [],
				leftListIndex: 0,
				columns: [
					[{
						label: '雪月夜',
						// 其他属性值
						id: 2021
						// ...
					}, {
						label: '冷夜雨',
						id: 804
					}]
				],
				columnsT: [
					[{
						label: '全部',
						id: 'all'
					}, {
						label: '团播间',
						// 其他属性值
						id: 1
						// ...
					}, {
						label: '员工公寓',
						id: 2
					}, {
						label: '直播间',
						id: 3
					}, ]
				],



				columnsF: [],
				showF: false,
				showT: false,
				louList: [],
				floorList: [],
				keyword: '',
				storey_id: '',
				floor_id: '',
				room_id: '',
				type: '',
				status: '',
				page: 1
			}
		},
		mounted() {
			this.getfool()
		},
		methods: {
			async getfool() {
				const picker = this.$refs.uPicker
				const {
					data
				} = await this.$request(this.$Api.anchorFloor, {

				}, "POST")
				if (data.code !== 0) return
				this.louList = data.data.list
				this.columnsF = [data.data.list]
				this.leftList = data.data.list[0].storey
				this.floor_id = data.data.list[0].floor_id
				if (data.data.list[0].storey) {
					this.storey_id = data.data.list[0].storey[0].storey_id
					console.log('1321321321', this.storey_id)
					if (data.data.list[0].storey[0].room) {
						this.room_id = data.data.list[0].storey[0].room[0].room_id
						console.log('1321323213213211321', this.room_id)
					}
				}
				uni.stopPullDownRefresh()
				this.getRoomList()
			},
			onReachBottom() {
				this.page++
				this.getRoomList()
			},
			onPullDownRefresh() {
				this.page = 1
				this.floorList = []
				this.getfool()
			},
			async getRoomList() {
				const {
					data
				} = await this.$request(this.$Api.roomList, {
					storey_id: this.storey_id,
					floor_id: this.floor_id,
					type: this.type == '全部' ? '' : this.type,
					status: this.status == 'all' ? '' : this.status,
					page: this.page,
					keyword: this.keyword
				}, "POST")
				if (data.code !== 0) return
				this.floorList = this.floorList.concat(data.data.list)
				console.log('111', this.message)
			},
			searchEvnet() {
				console.log('111')
				this.page = 1
				this.floorList = []
				this.getRoomList()
			},
			closeEvent(e) {
				if (e == 0) {
					this.show = true
				} else if (e == 1) {
					this.showT = true
				} else {
					this.showF = true
				}
			},
			cancel() {
				console.log(111)
				this.showT = this.showF = this.show = false
			},
			// '主播状态', '主播类型', '楼层筛选'
			confirm(e) {
				console.log('111', e)
				this.status = e.value[0].id
				if (e.value[0].label == '全部') {
					this.list[0].name = '房间状态'
					this.list[0].status = 1
				} else {
					this.list[0].name = e.value[0].label
					this.list[0].status = 2
				}
				this.showT = this.showF = this.show = false
				this.page = 1
				this.floorList = []
				this.getRoomList()
			},
			confirmF(e) {
				console.log('222', e, this.leftList)
				this.floor_id = e.value[0].floor_id
				if (e.value[0].label == '全部') {
					this.list[2].name = '区域筛选'
					this.list[2].status = 1
				} else {
					this.list[2].name = e.value[0].name
					this.list[2].status = 2
				}
				this.leftList = this.louList[e.indexs[0]].storey
				this.floor_id = this.leftList[0].floor_id

				if (this.leftList) {
					this.storey_id = this.leftList[0].storey_id
					console.log('1321321321', this.storey_id)
					if (this.leftList[0].room) {
						this.room_id = this.leftList[0].room[0].room_id
						console.log('1321323213213211321', this.room_id)
					}
				}

				this.showF = this.show = false
				this.page = 1
				this.floorList = []
				this.getRoomList()
			},
			confirmT(e) {
				this.type = e.value[0].label
				console.log('3333', e)
				this.showT = this.showF = this.show = false
				// this.list[1] = e.value[0].label
				if (e.value[0].label == '全部') {
					this.list[1].name = '房间类型'
					this.list[1].status = 1
				} else {
					this.list[1].name = e.value[0].label
					this.list[1].status = 2
				}
				this.page = 1
				this.floorList = []
				this.getRoomList()
			},
			changeHandler(e) {
				console.log('e', e.index)

			},
			leftListEvent(idx, id) {
				this.leftListIndex = idx
				this.storey_id = id
				this.page = 1
				this.floorList = []
				this.getRoomList()
			},
			// 查看详情
			roomEvent(ite) {
				uni.navigateTo({
					url: '/pagesA/index/roomDetail?id=' + ite.room_id
				})
			}
		}
	}
</script>

<style lang="scss">
	.room {
		width: 100%;
		height: 100vh;
		overflow: hidden;
		// padding-bottom: 180rpx;
	}

	.roomScroll {
		height: calc(100% - 336rpx);
		// overflow: scroll;
		margin-top: 20rpx;
		display: flex;
		// align-items: center;
		justify-content: space-between;

		.roomScrollLeft {
			width: 160rpx;
			overflow: scroll;
			height: 100%;
			background: #FFFFFF;

			.roomScrollLeft_item {
				width: 160rpx;
				min-height: 90rpx;
				text-align: center;
				line-height: 90rpx;
				color: #000;
				background: #FFFFFF;
				font-size: 28rpx;

			}

			.roomScrollLeft_item_act {
				background: #2E61FF;
				color: #FFFFFF;
			}
		}

		.roomScrollRight {
			width: calc(100% - 160rpx);
			// display: flex;
			// flex-wrap: wrap;
			// justify-content: space-between;
			overflow: scroll;
			height: 100%;

			.roomScrollRight_items {
				width: 252rpx;
				height: 230rpx;
				background: #FFFFFF;
				margin: 0 0rpx 24rpx 24rpx;
				float: left;

				.roomScrollRight_items_top {
					font-size: 32rpx;
					line-height: 90rpx;
					padding: 0 30rpx;
					box-sizing: border-box;
					display: flex;
					justify-content: space-between;


					.roomScrollRight_items_top_left {
						font-weight: bold;
						width: 120rpx;
					}

					.roomScrollRight_items_top_right {
						font-size: 24rpx;
					}
				}

				.roomScrollRight_items_center {
					font-size: 24rpx;
					line-height: 24rpx;
					padding: 0 24rpx;
					box-sizing: border-box;
					display: flex;
					justify-content: flex-start;
					align-items: center;

					.roomScrollRight_items_center_left {
						width: 120rpx;
					}

					.roomScrollRight_items_center_right {
						width: 88rpx;
						height: 34rpx;
						border-radius: 8rpx;
						// border: 2rpx solid #CECECE;
						font-size: 22rpx;
						color: #fff;
						text-align: center;
						line-height: 34rpx;
						margin-left: 8rpx;
						width: 32rpx;
						height: 32rpx;
						background: #D0021B;
					}

					.roomScrollRight_items_center_right1 {
						width: 88rpx;
						height: 34rpx;
						border-radius: 8rpx;
						// border: 2rpx solid #CECECE;
						font-size: 22rpx;
						color: #fff;
						text-align: center;
						line-height: 34rpx;
						margin-left: 8rpx;
						width: 32rpx;
						height: 32rpx;
						background: #F5A623;
					}

				}

				.roomScrollRight_items_bottom {
					font-size: 24rpx;
					display: flex;
					align-items: center;
					margin-top: 24rpx;
					padding: 0 30rpx;
					box-sizing: border-box;

					.roomScrollRight_items_bottom_left {
						width: 50rpx;
						height: 50rpx;
						margin-right: 16rpx;

						image {
							width: 100%;
							height: 100%;
							border-radius: 50%;
						}
					}
				}
			}
		}
	}

	.room_top {
		width: 750rpx;
		height: 216rpx;
		background: #FFFFFF;

		.room_top_search {
			padding: 30rpx;
			box-sizing: border-box;
		}

		.room_top_select {
			display: flex;
			align-items: flex-start;
			justify-content: center;
			padding: 0 30rpx;
			box-sizing: border-box;
			width: 100%;
			height: 100rpx;
			margin-top: 10rpx;
		}

		.room_top_select_items {
			font-size: 28rpx;
			color: #666666;
			display: flex;
			align-items: center;
			justify-content: center;
			width: 33.33%;

			span {
				margin-right: 10rpx;
			}
		}
	}
</style>